<template>
    <div class="lookall">
        <div class="top_title">
            <span class="iconfont icon-fanhui" @click.stop="back"></span>
            {{ title }}
        </div>
        <div v-if="TypeThree.length" class="lookall_content">
            <router-link
                class="lookall_info"
                :to="`/details/${item.comic_id}`"
                v-for="item in TypeThree"
                :key="item.comic_id"
            >
                <div class="left">
                    <van-image
                        width="23vw"
                        height="30.6vw"
                        lazy-load
                        fit="cover"
                        :src="`${item.vertical_cover}@100w.jpg`"
                    />
                </div>
                <div class="right">
                    <p>{{ item.title }}</p>
                    <div class="right_info">
                        <div class="sound" v-if="item.type == 1">
                            <img src="../assets/images/er2.png" alt="" />
                            Vomic
                        </div>
                        <div class="title_name" v-else>
                            <span v-for="(name, index) in item.author_name" :key="index"
                                >{{ name }}&nbsp;&nbsp;</span
                            >
                        </div>
                        <div>
                            <div class="author_name">
                                <span v-for="(style, index) in item.style" :key="index + 5"
                                    >{{ style }}
                                </span>
                            </div>
                            <span v-if="item.last_short_title == '最终话'">
                                [完结]共{{ item.total }}话
                            </span>
                            <span v-else>更新至{{ item.last_short_title }}话</span>
                        </div>
                    </div>
                </div>
            </router-link>
        </div>
        <div class="more" v-if="showMore">已经到底了...</div>
        <div class="loadingTop" v-if="loading">
            <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
        </div>
        <div class="loadingBottom">
            <van-loading size="24px" v-if="isloading" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
        </div>
    </div>
</template>

<script>
import _ from "lodash";
export default {
    props: {
        id: {
            type: String,
            define: "0",
        },
        title: {
            type: String,
            define: "",
        },
    },
    data() {
        return {
            TypeThree: [],
            page: 1,
            showMore: false,
            isloading: null,
            loading: false,
            total: 0, // 总条数
            offset: 1,
        };
    },
    created() {
        this.getTypeThree();
    },
    mounted() {
        window.addEventListener("scroll", this.windowScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.windowScroll);
    },
    methods: {
        back() {
            history.back();
        },
        async getTypeThree(offset = 15) {
            this.loading = true;
            await this.axios
                .get(`GetClassPageSixComics?id=${this.id}&pageNum=1&pageSize=${offset}&isAll=1`)
                .then((res) => {
                    this.total = 0;
                    this.TypeThree = res.roll_six_comics;
                    this.total = res.total;
                    this.isloading = false;
                    this.loading = false;
                });
        },
        more() {
            this.page++;
            this.offset = this.page * 15;
            if (this.total < this.offset) {
                this.showMore = true;
                this.isloading = false;
                window.removeEventListener("scroll", this.windowScroll);
                return;
            }

            this.isloading = true;

            this.getTypeThree(this.offset);
        },
        windowScroll: _.throttle(function () {
            //卷去的距离
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            //页面高度
            let clientHeight = document.body.clientHeight;
            //窗口内容的高度
            let contentHeight = window.innerHeight;
            if (scrollTop + contentHeight >= clientHeight - 1) {
                this.more();
            }
        }, 500),
    },
};
</script>

<style lang="scss" scoped>
.lookall {
    position: relative;
    .top_title {
        text-align: center;
        font-size: 16px;
        line-height: 45px;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 100;
        background: #fff;
        span {
            position: absolute;
            left: 12px;
            top: 0;
            bottom: 0;
        }
    }
    .lookall_content {
        margin-top: 45px;
        .lookall_info {
            display: flex;
            padding: 10px 15px;
            overflow: hidden;
            .left {
                width: 25%;
            }
            .right {
                flex: 1;
                padding-left: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;
                p {
                    font-size: 14px;
                    color: #1b1c1e;
                    padding-top: 3px;
                }
                .right_info {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .sound {
                        position: absolute;
                        top: 30px;
                        left: 20px;
                        width: 21%;
                        border-radius: 20px;
                        padding: 3px 5px;
                        color: #3aa9f7;
                        font-size: 12px;
                        background: #e4f2fd;
                        img {
                            width: 12px;
                            height: 12px;
                            padding-right: 2px;
                            padding-left: 2px;
                            vertical-align: baseline;
                        }
                    }
                    span {
                        font-size: 12px;
                        color: #999;
                    }
                    .title_name {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        width: 100%;
                    }
                    .author_name {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 12px;
                        width: 100%;
                    }
                }
            }
        }
    }

    .more {
        line-height: 40px;
        text-align: center;
    }
    .loadingTop {
        position: absolute;
        left: 0;
        right: 0;
        top: 100px;
    }
    .loadingBottom {
        position: absolute;
        bottom: -50px;
        left: 0;
        right: 0;
    }
}
</style>
